<template>
  <div class="css-basic clearfix">
    <el-scrollbar style="height: 100%">
    <div class="main">
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16">css盒模型</span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            1、box-sizing:content-boxs;<br>
            width = content;<br>
            2、box-sizing:border-box;<br>
            width = boder+padding+content;<br>
          </code>
        </div>
      </el-card>
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16">单行文本超出后...</span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            {<br>
              text-overflow:ellipsis;<br>
              overflow:hidden;<br>
              white-space:nowrap;<br>
            }
          </code>
        </div>
      </el-card>
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16">css居中</span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            {<br>
              left: 50%!important;<br>
              top: 50%!important;<br>
              transform: translate(-50%,-50%)<br>
            }
          </code>
        </div>
      </el-card>
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16">避免浏览器自动填充</span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            autocomplete="new-password"<br>
            或者<br>
            //在前面加一个 &lt;input type="password"/&gt; 并设置css让不在页面中出现<br>
            &lt;form&gt;<br>
              &nbsp;&nbsp;&lt;input type="password" style="position: absolute; top: -999px"/&gt;<br>
              &nbsp;&nbsp;&lt;input type="text" name="username"/&gt;<br>
              &nbsp;&nbsp;&lt;input type="password" name="password"/&gt;<br>
            &lt;/form&gt;
          </code>
        </div>
      </el-card>
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16">背景图片自适应拉伸不变形</span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            {<br>
              margin: 0 auto;<br>
              height: 274px;<br>
              width: 400px;<br>
              background-color: #f8f8f8;<br>
              background-image:url("static/bj.png");<br>
              background-repeat:no-repeat;<br>
              background-size: cover;<br>
            }<br>
            //容器与背景图<br>
            长度比:150/100=1.5<br>
            宽度比:60/50=1.2<br>
            cover 取大,所以就按照 长度比 1.5 (等比缩放背景图片)<br>
            contain 取小,所以就按宽度比 1.2 (等比缩放背景图片)
          </code>
        </div>
      </el-card>
    </div>
    </el-scrollbar>
  </div>
</template>

<script>
export default {
  name: 'CssBasic'
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.css-basic{
  margin: 0 auto;
  overflow: hidden;
  .main{
    column-count: 2;
    column-gap:10px;
    padding: 10px;
  }
  .el-card{
    margin: 10px 0;
  }
  .el-card__header{
    padding: 0 10px;
    text-align: left;
    font-size: 14px;
    line-height: 30px;
    line-height: 30px;
  }
}
</style>
